<template>
    <div>
        <back-head title="订单详情" returnFlag="true"></back-head>
        
        <!-- 基本信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">基本信息</span>
            </div>
            <el-row class="info">
                <el-col :span="10">
                    <p>订单号：{{pageData.orderNo}}</p>
                    <p>订单来源：{{pageData.orderSource || '无'}}</p>
                </el-col>
                <el-col :span="9">
                    <p>下单时间：{{pageData.createTime | formatDate}}</p>
                    <p>支付时间：{{pageData.payTime | formatDate}}</p>
                </el-col>
            </el-row>
        </el-card>

        <!-- 配送地址信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">配送地址信息</span>
            </div>
            <div class="info">
                <p>收件人地址：{{pageData.receiverProvinceName}} {{pageData.receiverCityName}} {{pageData.receiverTownName}} {{pageData.receiverDistrictName}} {{pageData.receiverAddressDetail}}</p>
                <p>收件人姓名：{{pageData.receiverName}}</p>
                <p>收件人手机号：{{pageData.receiverMobile}}</p>
            </div>
        </el-card>

        <!-- 包裹信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">包裹信息</span>
            </div>
            <el-table
                ref="packageInfo"
                :data="pageData.packageList"
                style="width: 1000px;
                text-align: center;">
                <el-table-column
                  prop="packageCode"
                  label="包裹号"
                  width="200">
                </el-table-column>
                <el-table-column                  
                  label="包裹状态"
                  width="150">
                  <template slot-scope="scope">
                    {{packageStatusList[scope.row.packageStatus] || '未知'}}
                </template>
                </el-table-column>
                <el-table-column
                    label="包裹物流信息"
                    min-width="150">
                    <template slot-scope="scope">
                        <package-alert
                            v-for="data in scope.row.expressList"
                            :express="data" 
                            :packageCode="scope.row.packageCode"
                            :key="data">
                            {{data}}
                        </package-alert>
                    </template>
                </el-table-column>
              </el-table>
        </el-card>

        <!-- 商品信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">商品信息</span>
            </div>
            <el-table
                ref="goodsInfo"
                :data="pageData.yxOrdersSkuList"
                style="width: 1200px;
                text-align: center;">
                <el-table-column
                    label="图片"
                    width="150">
                    <template slot-scope="scope">
                        <img :src="scope.row.picUrl" alt="" style="width: 100%;">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="productName"
                    label="商品名称"
                    min-width="200"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="skuCode"
                    label="SKU"
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="saleCount"
                    label="商品数量"
                    width="100">
                </el-table-column>
                <el-table-column
                    label="商品单价"
                    width="120">
                    <template slot-scope="scope">
                        ￥{{scope.row.originPrice}}
                    </template>
                </el-table-column>
                <el-table-column                
                    label="活动优惠价格"
                    width="120">
                    <template slot-scope="scope">
                        ￥{{scope.row.activityTotalAmount}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="goodsNum"
                    label="优惠券金额"
                    width="120">
                    <template slot-scope="scope">
                        ￥{{scope.row.conponTotalAmount || 0}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="goodsNum"
                    label="金额小计"
                    width="150">
                    <template slot-scope="scope">
                        ￥{{scope.row.subtotalAmount}}
                    </template>
                </el-table-column>
              </el-table>
        </el-card>

        <!-- 订单信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">订单信息</span>
            </div>
            <div class="info">
                <p>订单状态：{{orderStatus}}</p>
                <p v-if="pageData.rejectReason">拒绝原因：{{pageData.rejectReason}}</p>
                <p>邮费：¥{{pageData.expFee}}</p>
                <p>订单实付金额：¥{{pageData.realPrice}}</p>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderNo : this.$route.query.orderNo,
                pageData:{},
                packageStatusList: {
                    'START_DELIVERY' : '已发货',
                    'WAITING_DELIVERY' : '待发货',
                    'WAITING_COMMENT' : '已收货',
                    'KF_CANCEL' : '已取消',
                },
            }
        },
        computed: {
            orderStatus(){
                const orderStatusList= {
                    'PAYED' : '已支付',
                    'KF_CANCEL' : '已取消',
                    'CANCELLING' : '取消中'
                }
                if(this.pageData.rejectReason !== null && this.pageData.rejectReason !== ""){
                    return "已支付（已拒绝取消订单）";
                }
                return orderStatusList[this.pageData.orderStatus] || '未知';
            }
        },
        mounted(){
            this.getData();
        },
        methods: {
            getData(){
                this.$axios
                    .post("/admin/order/getOrderInfo.json",{
                        orderNo: this.orderNo
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.pageData = data.data;
                        }else{
                            const message = data.message || '获取数据失败';
                            this.$message.error(message);
                            setTimeout(()=>{
                                this.$router.go(-1);
                            },1000)
                        } 
                    })
            }
        }
    }

</script>


<style scoped>
    .info p{
        padding: 8px 20px 8px 0;
    }
</style>
